import React from "react";
import {
  Tabs,
  TabList,
  Tab,
  TabPanel,
  TabPanels,
  Box,
} from "@chakra-ui/react";
import SignUp from "./SignUp";
import SignIn from "./SignIn";

export default function Form() {
  const point = {
    fontWeight: "bold",
    fontSize: "24px",
  };
  const flex = {
    display: "flex",
    flexDirection: "row",
    alignItem: "center",
    justifyContent: "center",
  };
  return (
    <Box
      p="50px 50px 30px"
      w={400}
      boxShadow="md"
      borderRadius="lg"
      bg="#ffffff"
      marginTop={200}
    >
      <Tabs size="md" m="0 auto" colorScheme="red">
        <TabList style={flex} borderBottom="0px" mb={50}>
          <Tab _focus={{ boxShadow: "none" }}>登录</Tab>
          <Tab textAlign="center" isDisabled={true} w="20px" style={point}>
            ·
          </Tab>
          <Tab _focus={{ boxShadow: "none" }}>注册</Tab>
        </TabList>
        <TabPanels>
          <TabPanel p={0}>
            <SignIn  />
          </TabPanel>
          <TabPanel></TabPanel>
          <TabPanel p={0} >
            <SignUp />
          </TabPanel>
        </TabPanels>
      </Tabs>
    </Box>
  );
}
